<template>
  <div class="model-list bg" :style="siteConfig.ad.bg_content_open ? containerStyle : 'background-color: #1a1a1a;'">
    <div class="new-nav-page" id="container" style="width: 100%;">
      <headerCon ref="myDiv" :logoActive="logoActive" :hotSearchList="hotSearchList">
      </headerCon>
    </div>
    <!-- 搜索 + 轮播图 start -->
    <div class="new-nav-search-mask"></div>
    <div class="mask-www-input-search"></div>
    <!-- 动画效果-->
    <div class="index-banner-search">
      <!--搜索 -->
      <div class="newwww-search-content">
        <!-- 新增样式 newwww-search-show-->
        <div class="search-content">
          <div class="wid-search">
            <div class="index-spring-festival sysFocusImgSing focus66">
              <a rel="nofollow" href="#" target="_blank"><img :src="siteConf.logo3" alt="默认logo" title="默认logo" /></a>
            </div>
            <div class="search-title clearfix">
              <span :class="isSearchAcitve == index ? 'active' : ''" :data-id="item.id"
                v-for="(item, index) in navConfig.all" :key="index" @click="switchSearchIndex(index)">{{ item.title ||
                  '' }}</span>
            </div>
            <div class="search-form-input">
              <el-icon class="icon nav_icon_search" style="top: 20px !important;" size="25">
                <Search />
              </el-icon>
              <input class="www-keyword js-search-normal" v-model="searchValue" type="text" placeholder="搜索ID、关键词" />
              <div class="search-operation" @click="searchClick()">
                <el-icon class="icon search_image_search search_TB_remove"
                  :style="{ display: showIcon ? 'inline-block' : 'none' }" @click.stop="clearSearch()">
                  <Close />
                </el-icon>
                <span class="btn-key-search js-search-btn">搜 索</span>
              </div>
              <div class="newww-related-search">
                <div class="item-related-search search-related-kyeword">
                  <div class="list-related">
                    <p class="related-title" style="display: flex;align-items: center;">
                      热门搜索
                      <el-icon size="14px" color="red">
                        <SvgIcon iconName="icon-hot-for-atmosphere" />
                      </el-icon>
                    </p>
                    <div class="related-search-class clearfix">
                      <a v-for="(v, i) in hotSearchList" :key="i" class="js_hot_keyword"
                        @click="hotSearchClick(v['title'])">{{ v['title'] }}</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="icon icon_search_close_mask js_close_btn_search" aria-hidden="true" @click.stop="clearSearch()">
            <el-icon size="30">
              <Close />
            </el-icon>
          </div>
        </div>
      </div>
      <!--搜索end -->
      <!-- 轮播图 start -->
      <div
        class="swiper-container swiper-container-wwwbg swiper-container-fade swiper-container-initialized swiper-container-horizontal">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-active">
            <el-carousel height="580px" :interval="10000">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <p class="item-company swiper-img-bg" :style="{ backgroundImage: `url(${item['full_url']})` }"></p>
                <div class="news-banner-mask"></div>
                <div class="swiper-author-information">
                  <!-- <a href="#" class="user-author clearfix ll_point_jsfun">
                    <span class="user-author-name">{{ item["title"] }}</span>
                  </a> -->
                  <!-- <div class="author-content" style="color: aliceblue">
                    {{ item['desc'] }}
                  </div> -->
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <!-- 轮播图 end -->
    </div>
    <!--搜索 + 轮播图end -->
    <!-- 内容 start -->
    <div class="new-edition-home">
      <div class="interest-occupying" ref="interestOccupyingRef">
        <div class="flex-top-interest">
          <div class="interest-content">
            <div class="tab-class-gallery">
              <!-- <a style="color: #e85623 !important; font-size: 25px;" class="active">为您推荐</a> -->

              <!-- <a
                                data-class_id="1" class="">住宅设计</a> <a data-class_id="3" class="">商业地产</a> <a
                                data-class_id="4" class="">文体医疗</a> <a data-class_id="5" class="">娱乐场所</a> <a
                                data-class_id="6" class="">餐饮空间</a> <a data-class_id="8" class="">建筑设计</a> <a
                                data-class_id="9" class="">景观设计</a> <a data-class_id="7" class="">公共空间</a> <a
                                data-class_id="2" class="">软装局部</a> <a class="title-active"></a>
                            <div class="hover-select-gallery"> <a class="more-class">更多</a>
                                <div class="item-select-content"> </div>
                            </div> -->
            </div>
            <!-- <div class="interest-search-category"><span class="select-class"> <i>全部类型</i> <svg class="icon"
                                    aria-hidden="true">
                                    <use xlink:href="#icon-direction_single_arrow_up_s"></use>
                                </svg> </span>
                            <div class="hover-search-category">
                                <ul>
                                    <li class="active" data-type="0">全部类型</li>
                                    <li data-type="1">3D模型</li>
                                    <li data-type="6">SU模型</li>
                                    <li data-type="8">CAD图纸</li>
                                    <li data-type="12">方案文本</li>
                                    <li data-type="11">全球案例</li>
                                    <li data-type="10">效果图</li>
                                    <li data-type="9">灵感图</li>
                                </ul>
                            </div>
                        </div> -->
          </div>
        </div>
      </div>

      <div ref="waterfallContainer" style="">
        <ul style="
    display: flex;
    justify-content: center;
    width: 100%;">
          <ul v-infinite-scroll="load" infinite-scroll-distance="100" :infinite-scroll-disabled="disabled"
            style="overflow: auto;">
            <!-- <waterfallContent :productList="productList" :gutter="gutter"></waterfallContent> -->
            <recomm :recommendList="productList" :isTitle="true"></recomm>
          </ul>
          <!-- <div style="text-align: center;margin-top: 60px; color:#ffffff;" v-if="loading">加载中...</div>
          <div style="text-align: center;margin-top: 60px; color:#ffffff;" v-if="noMore">没有更多了</div> -->
        </ul>
      </div>
    </div>
    <!-- 内容end -->
    <!--页脚 -->
    <footerContent>
    </footerContent>
    <!--页脚 -->
    <!-- 页面内容 -->
    <loginFun></loginFun>
    <!-- <ad></ad> -->
    <!-- <AuthModal></AuthModal> -->

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { sayHello } from "@/js/public.js";
import { newFooter } from "@/js/new_footer.js";
import recomm from "../components/recommend.vue";
import footerContent from "../components/footerContent.vue";
// import ad from "../components/ad.vue";
// import AuthModal from '../components/auth_modal.vue';
import headerCon from "../components/header.vue";
import loginFun from "../components/login.vue";
import router from '../router'
import {
  getBanner,
  getProductList,
  hotSearch
} from "../api/home/index";
import { useSiteConfig } from '../stores/siteConfig'
import { useNavConfig } from '../stores/navConfig'
import { useSearch } from "../stores/search";
import { useUserInfo } from "../stores/userInfo";
const siteConfig = useSiteConfig()
const saturate = ref(0)
if (siteConfig.ad.saturate === undefined || siteConfig.ad.saturate === null || siteConfig.ad.saturate === "") {
  saturate.value = 0
} else {
  saturate.value = siteConfig.ad.saturate
}
const filter_value = ref(0)
if (siteConfig.ad.filter_value === undefined || siteConfig.ad.filter_value === null || siteConfig.ad.filter_value === "") {
  filter_value.value = 0
} else {
  filter_value.value = siteConfig.ad.filter_value
}
const brightness = ref(0)
if (siteConfig.ad.brightness === undefined || siteConfig.ad.brightness === null || siteConfig.ad.brightness === "") {
  brightness.value = 0
} else {
  brightness.value = siteConfig.ad.brightness
}
const contrast = ref(0)
if (siteConfig.ad.contrast === undefined || siteConfig.ad.contrast === null || siteConfig.ad.contrast === "") {
  contrast.value = 0
} else {
  contrast.value = siteConfig.ad.contrast
}
const containerStyle = computed(() => ({
  '--bg-image': `url(${siteConfig.ad.content_bg})`,
  '--bg-filter': siteConfig.ad.content_bg_is_open ? 'blur(' + filter_value.value + 'px) brightness(' + brightness.value + '%) saturate(' + saturate.value + '%) contrast(' + contrast.value + '%)' : '',
}));
const navConfig = useNavConfig()
const siteConf = useSiteConfig()
const search = useSearch()
const userInfo = useUserInfo()

const searchValue = ref('')
const isSearchAcitve = ref(0);
const classId = ref(0)
//搜索
const searchClick = () => {
  search.setSearchValue(searchValue.value)
  classId.value = (navConfig.all[isSearchAcitve.value]['id'])
  navConfig.dataFill(navConfig.all[isSearchAcitve.value])
  navConfig.removeMenu()
  navConfig.setClickGrade(1);
  navConfig.setTwoActiveId(0);
  navConfig.setProductPid(classId.value)
  navConfig.setSelectType('all')
  nextTick(() => {
    router.push({ name: '/product' })
  })
}

//选择搜索的标题索引
const switchSearchIndex = (index: number) => {
  classId.value = (navConfig.all[index]['id'])
  isSearchAcitve.value = index
}

//监听input 搜索框的值   
const showIcon = computed(() => searchValue.value.trim() !== '');

//清空搜索
const clearSearch = () => {
  searchValue.value = ""
  search.clearSearchValue()
}

//热门搜索
const hotSearchClick = (title: string) => {
  search.setSearchValue(title)
  classId.value = (navConfig.all[isSearchAcitve.value]['id'])
  navConfig.dataFill(navConfig.all[isSearchAcitve.value])
  navConfig.removeMenu()
  navConfig.setClickGrade(1);
  navConfig.setTwoActiveId(0);
  navConfig.setProductPid(classId.value)
  navConfig.setSelectType('all')
  nextTick(() => {
    router.push({ name: '/product' })
  })
}

const bannerList = ref([]); //轮播图数据
//获取banner数据
getBanner({}).then((res: any) => {
  if (res.code === 1) {
    bannerList.value = res.data.list;
  }
});
//数据源
const productList = ref<object[]>([]);
const productTotal = ref(0);
const page = ref(1);
const limit = ref(10);
const loading = ref(false);
const noMore = computed(() => (page.value * limit.value) > productTotal.value);
const disabled = computed(() => loading.value || noMore.value)
const getProduct = () => {
  getProductList({ page: page.value, limit: limit.value }).then((res: any) => {
    if (res.code === 1) {
      productTotal.value = Number(res.data.total);
      if (res.data.list.length > 0) {
        productList.value = [...productList.value, ...res.data.list];
      }

    }
  });
};
//下拉加载
const load = () => {
  loading.value = true
  setTimeout(() => {
    page.value++;
    getProduct();
    loading.value = false;
  }, 2000);
  // if(userInfo.isLogin() && userInfo.user_type > 0){
  //   loading.value = true
  //   setTimeout(() => {
  //     page.value++;
  //     getProduct();
  //     loading.value = false;
  //   }, 2000);
  // }
};

//热门搜索
const hotSearchList = ref([])
hotSearch({}).then((res: any) => {
  if (res.code === 1) {
    hotSearchList.value = res.data.list;
  }
});
const gutter = ref(10); // 初始间隔大小  
const waterfallContainer = ref<HTMLDivElement | null>(null);
const updateGutter = () => {
  if (waterfallContainer.value) {
    const containerWidth = waterfallContainer.value.clientWidth;
    // 根据容器宽度动态调整gutter大小  
    // 例如，当容器宽度小于某个阈值时，减小gutter  
    if (containerWidth < 2400) {
      gutter.value = 10; // 当宽度小于600px时，gutter设置为10  
    } else {
      gutter.value = 60; // 否则，gutter设置为20  
    }
  }
};
const handleResize = () => {
  updateGutter();
};

const logoActive = ref(1);
const myDiv = ref();
// 生命周期钩子
let observer = null;
onMounted(() => {
  window.addEventListener('resize', handleResize);
  updateGutter(); // 初始化时调用一次以确保正确设置gutter  
  // 组件挂载后的逻辑
  getProduct();
  sayHello();
  newFooter();
  const btn = document.getElementById("container") as HTMLElement;
  // 创建一个MutationObserver实例
  //mutationsList:变化节点属性的数组
  observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
      const customData = myDiv.value.customFun();
      if (customData == "example") {
        logoActive.value = 2;
      } else {
        logoActive.value = 1;
      }
    }
  });

  // 开始监听属性变化
  observer.observe(btn, {
    subtree: true,
    attributeFilter: ["class"],
    attributes: true, // 是否监视正在监视的一个或多个节点上属性值的更改
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>


<style scoped>
.bg {
  position: relative;
  /* 移除主元素的 background-image */
  overflow: hidden;
  z-index: 1;
  /* 主元素可以设置最小高度 */
}

.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*  filter: blur(10px);添加模糊效果 */
  filter: var(--bg-filter);
  z-index: -1;

}
</style>
